<template>
  <el-container class="muzi">
    <el-header>
      <div class="left-panel">
        <el-button type="primary" @click="onCreate" :loading="operating.loading">添加</el-button>
        <el-dropdown split-button type="primary" @click="onBatch" @command="onCommand">
          导入
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :disabled="!template">下载导入模板</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="请输入关键字" class="tax-search-name" @change="onSearch()" clearable/>
          <el-button type="primary" icon="el-icon-search" @click="onSearch()"/>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="pager.dataList" border>
        <el-table-column prop="name" label="姓名" align="center"/>
        <el-table-column prop="serial" label="员工编号" align="center"/>
        <el-table-column prop="identity" label="证件号码" align="center" width="150"/>
        <el-table-column prop="birthday" label="生日" :formatter="formatter" align="center"/>
        <el-table-column prop="sex" label="性别" align="center"/>
        <el-table-column prop="status" label="工作状态" align="center"/>
        <el-table-column prop="mobile" label="联系电话" align="center"/>
        <el-table-column prop="join" label="入职日期" :formatter="formatter" align="center"/>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template #default="scope">
            <el-dropdown split-button type="primary" @click="onEdit(scope.row)" size="small" @command="onCommandHandle">
              <el-icon>
                <el-icon-edit/>
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{action: 'information', data: scope.row}">个人信息</el-dropdown-item>
                  <el-dropdown-item :command="{action: 'exemption', data: scope.row}">附加扣除</el-dropdown-item>
                  <el-dropdown-item :command="{action: 'delete', data: scope.row}">删除数据</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="operating" :gutter="5">
        <el-col :span="6" class="pager">
          <el-pagination layout="prev, pager, next" :total="pager.total" @current-change="onSearch"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <BatchForm v-if="show.batch" ref="BatchHandle" @success="onSearch" @closed="show.batch=false"/>
</template>

<script>
/**
 *
 * @author Yufe
 * @version 1.0
 */
import dayjs from "dayjs";

import BatchForm from '@/views/employee/batch';

export default {
  name: '',
  components: {BatchForm},
  data() {
    return {
      show: {
        form: false,
        batch: false,
      },
      total: 0,
      dataList: [],
      search: {
        keyword: ''
      },
      operating: {
        loading: false
      },
      template: false,
      pager: {
        total: 0,
        dataList: [],
        loading: false,
        clean: function () {
          this.total = 0;
          this.dataList.length = 0;
        },
        fill: function ({total, dataList}) {
          this.total = total;
          this.dataList = dataList;
        }
      },
    }
  },
  mounted() {
    this.onSearch();

    if ((this.template = localStorage['employee-template-url']) === undefined) {
      this.$API.employee.template.get().then(res => {
        if (res.success) {
          this.template = res.data.url;
          localStorage['employee-template-url'] = res.data.url
        }
      })
    }
  },
  computed: {},
  methods: {
    onSearch(number = 1) {
      this.$API.employee.pager.get({...this.search, number}).then(res => {
        if (res.success) {
          this.pager.fill(res.data)
        }
      })
    },
    onCreate() {
      this.$router.push({name: "employee-form"})
    },
    onInformation({digest}) {
      this.$router.push({name: "information-form", params: {digest}})
    },
    onExemption({digest}) {
      this.$router.push({name: "exemption-form", params: {digest}})
    },
    formatter(row, column, value) {
      if (value) return dayjs(value).format('YYYY-MM-DD')
      return "-";
    },
    onEdit({digest}) {
      this.$router.push({name: "employee-form", query: {key: digest}})
    },
    onDelete(row) {
      this.$confirm(`确认要删除“${row.name}”吗?`, '警告提示', {type: 'warning',}).then(() => {
        this.$API.employee.detail.delete(row.digest).then(res => {
          if (res.success) {
            this.$message.success("删除成功")
            this.onSearch()
          }
        })
      }).catch((err) => {
        console.warn(err)
      })
    },
    onBatch() {
      this.show.batch = true
      this.$nextTick(() => {
        this.$refs.BatchHandle.open()
      })
    },
    onCommand() {
      window.open(this.template, "_blank");
    },
    onCommandHandle({action, data}) {
      switch (action) {
        case 'information':
          this.onInformation(data);
          break;
        case 'exemption':
          this.onExemption(data);
          break;
        case 'delete':
          this.onDelete(data);
          break;
        default:
          console.warn('未匹配到指令 >>> %s', action);
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
